<template>


  <Search @search="query" @reset="query"></Search>

  <a-card>
    <div class="table-operations">

      <a-button v-permission="['role:add']" type="primary" @click="addModalBt">新建</a-button>
      <a-button v-permission="['role:delete']" danger>删除</a-button>

    </div>
    <a-table :columns="columns" size='small' :data-source="data" rowKey="id"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      
      :pagination='false'>
      <template #bodyCell="{ column, record }">

        <template v-if="column.key === 'createTime'">

          {{ $formatDate(record.createTime) }}
        </template>

        <template v-if="column.key === 'action'">
          <div>
            <WsAuthority permissions="role:update">

              <a-button type="link" @click="updateRoleBt(record)" primary>编辑</a-button>
            </WsAuthority>
            <WsAuthority permissions="role:delete">
              <a-popconfirm title="请确定是否删除这条数据?" ok-text="确定" cancel-text="取消" @confirm="deleteRoleBt(record.id)">


                <a-button type="link" danger>删除</a-button>


              </a-popconfirm>
            </WsAuthority>

            <WsAuthority permissions="role:allocation">

              <a-button type="link" @click="authorityBtnModal(record.id)" primary>权限管理</a-button>
            </WsAuthority>
          </div>

        </template>
      </template>
    </a-table>
    <a-pagination :show-total="count => `共 ${count} 条`" v-model:current="current" v-model:pageSize="size" :total="count"
      @change="changePage" />
  </a-card>


  <RoleModal ref="modalRef" @refresh="refresh" />
  <AuthorityModal ref="authorityModalRef" @refresh="refresh" />
</template>
<script setup>
import Search from './component/search.vue'
import RoleModal from './component/modal.vue'
import AuthorityModal from './component/authority.vue'

import { columns } from '.'
import { pageN, deleteRole } from '@/api/role';
import { message } from 'ant-design-vue';
//数据
const data = ref([])
//总数
const count = ref(0);

//当前页码
const current = ref(1);
//当前页条数
const size = ref(10)
//弹框
const modalRef = ref()
const authorityModalRef = ref()

onMounted( () => {
   pageList({})
})
//获取数据
const pageList = (params) => {
  params.current = current.value;
  params.pageSize = size.value;
  pageN(params).then(res => {
    const { total, records } = res.data;
    data.value = records
    count.value = total;
   
    

  })
}

const refresh = () => {
  current.value = 1;
  pageList({})
}
//改变页码
const changePage = (page, pageSize) => {
  current.value = page;
  pageList({})
};

//查询与重置
const query = data => {
  pageList(data)
}

//打开权限管理的页面
const authorityBtnModal = (id) => {
  authorityModalRef.value.openModal(id)
}
//打开弹框
const addModalBt = () => {
  modalRef.value.openModal()
}
//删除用户
const deleteRoleBt = id => {
  deleteRole(id);
  message.success({
    content: "删除成功", duration: 1, onClose: () => {
      pageList({})
    }
  });

}
//更新用户弹框
const updateRoleBt = record => {
  modalRef.value.openModal(false, record)
}
const selectedRowKeys = ref([]); // Check here to configure the default column
const onSelectChange = keys => {
  console.log('selectedRowKeys changed: ', keys);
  selectedRowKeys.value = keys;
};


const hasSelected = computed(() => selectedRowKeys.value.length > 0);

const changeStatus = function (checked, event) {
  console.log(checked)
}

</script>

<style scoped></style>